<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <link rel="stylesheet" href="../gardens.css/reset.css">
    <script src="../JS/personal.js"></script>
    <link rel="stylesheet" href="../CSS/personal.css">
    <link rel="stylesheet" href="../gardens.css/bootstrap.css">


</head>
<body>
    <div class="container">
        <iframe src="../gardens.html/header.html" frameborder="0" id="header" scrolling="no"></iframe>
        <div class="header"><h1 class="head">个人中心</h1></div>
        <div class="main">
            <div class="left">
                <ul class="nav flex-column">
                    <li class="nav-item">
                      <a class="nav-link active" aria-current="page" href="#">个人信息</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">我的订单</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">常用联系人</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">优惠券</a>
                      </li>
                    <li class="nav-item">
                      <a class="break-personal" href="home.html">退出登录</a>
                    </li>
                  </ul>
            </div>
            <div class="right">
                <!-- <div class="active"><h1>个人信息</h1></div> -->
                <div class="active"> <!--个人信息-->
                    <ul>
                        <form action="#" id="mymassage">
                            <li>姓名  
                                <input type="text" name="userName" id="userName" form="mymassage" placeholder="请输入你的名字">
                                <input type="button" value="修改" form="mybuttom">  
                            </li>
                            <li>性别
                                <input type="text" name="userSex" id="userSex" form="mymassage" placeholder="请输入您的性别">
                                <input type="button" value="修改" form="mybuttom">

                            </li>
                            <li>身份证号
                                <input type="password" name="idcard" id="idcard" form="mymassage" placeholder="请输入您的身份证号">
                                <input type="button" value="修改" form="mybuttom">

                            </li>
                            <li>手机号
                                <input type="tel" name="phone" id="phone" form="mymassage" placeholder="请输入您的手机号">
                                <input type="button" value="修改" form="mybuttom">

                            </li>
                            <li>邮箱
                                <input type="email" name="userEmail" id="userEmail" form="mymassage" placeholder="请输入您的邮箱地址">
                                <input type="button" value="修改" form="mybuttom">

                            </li>
                        </form>
                    </ul>
                </div>
                <div>
                    <ul class="break">
                        <li><a class="nav-link" href="#">全部订单</a></li>
                        <li><a class="nav-link" href="#">待付款</a></li>
                        <li><a class="nav-link" href="#">待消费</a></li>
                        <li><a class="nav-link" href="#">已完成</a></li>
                    </ul>
                    <ul class="break">
                        <ul class="page">
                            <li><a class="nav-link" href="#">1</a></li>
                            <li><a class="nav-link" href="#">2</a></li>
                            <li><a class="nav-link" href="#">3</a></li>
                            <li><a class="nav-link" href="#">Next</a></li>
                        </ul>

                    </ul>
                </div>
                
                <div>
                    <table class="title">
                        <tr>
                            <th>姓名</th>
                            <th>手机号</th>
                            <th>身份证号</th>
                            <th>操作</th>
                        </tr>
                        <tr>
                            <td>张三</td>
                            <td>6666666</td>
                            <td>666666666666666</td>
                            <td><button class="delete-btn">删除</button></td>
                        </tr>
                        <tr>
                            <td>李四</td>
                            <td>777777777</td>
                            <td>77777777777777777</td>
                            <td><button class="delete-btn">删除</button></td>
                        </tr>
                        <tr>
                            <td>王老五/td>
                            <td>12345678901</td>
                            <td>123456789012345678</td>
                            <td><button class="delete-btn">删除</button></td>
                        </tr>
                    </table>
                </div>
                <div>
                    <ul class="break">
                        <li><a class="nav-link" href="#">可用券</a></li>
                        <li><a class="nav-link" href="#">可领券</a></li>
                        <li><a class="nav-link" href="#">已用券</a></li>
                        <li><a class="nav-link" href="#">过期券</a></li>
                    </ul>
                    <ul class="break">
                        <ul class="page">
                            <li><a class="nav-link" href="#">1</a></li>
                            <li><a class="nav-link" href="#">2</a></li>
                            <li><a class="nav-link" href="#">3</a></li>
                            <li><a class="nav-link" href="#">Next</a></li>
                        </ul>
                    </ul>
                <div></div>
            </div>
        </div>
        
        <!-- <iframe src="../gardens.html/footer.html" frameborder="0" id="header" scrolling="no"></iframe> -->
    </div>
    <div class="foot">
        <iframe src="../gardens.html/footer.html" frameborder="0" id="header" scrolling="no"></iframe>
    </div>
</body>
</html>